import { useState } from 'react';
import { RootState } from '../../store';
import { useAppDispatch, useAppSelector } from '../../store/hook';
import { decrement, increment, selectCounter } from '../../store/modules/counter';
import styles from './counter.module.css';

export default function Counter() {
    const dispatch = useAppDispatch();
    const counter = useAppSelector(selectCounter);
    
    return (
        <div className={styles['container']}>
            <div>{counter.count}</div>
            <div>
                <button id="increament" onClick={() => dispatch(increment(1))}>
                    Increase
                </button>
                <button id="increament" onClick={() => dispatch(decrement(1))}>
                    Decrease
                </button>
            </div>
        </div>
    );
}